<template lang="pug">
  n-input(
    ref="search"
    v-bind="$attrs"
  )
    template(#suffix)
      .icon-box(@click="ev_search")
        svg-icon(v-if="icon" size="20" :icon="icon")
        n-icon(v-else, size="20" :component="Search20Regular")
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue"
import { Search20Regular } from "@vicons/fluent"

const props = withDefaults(defineProps<{
  icon?: string
}>(), {
  icon: ''
})
const emit = defineEmits(['pressEnter'])

const search = ref()

const ev_search = () => {
  emit('pressEnter', search.value.inputElRef.value)
  search.value.inputElRef.blur()
}

onMounted(() => {
  search.value.inputElRef.addEventListener('keyup', (e: any) => {
    if (e.key ==='Enter') {
      ev_search()
    }
  })
})
</script>

<style lang="scss" scoped>

.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>